<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--    <script src="https://unpkg.com/vue/dist/vue.js"></script>-->
    <script th:src="@{/js/jquery.min.js}"></script>
    <!--前端使用vue  前后端分离-->
    <script th:src="@{/js/axios.js}"></script>
    <script th:src="@{/js/vue.min.js}"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <style type="text/css">
        body {
            text-align: center;
        }

        #app {
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="app">
    <div v-for="(url,index) in results">
        <img v-if="index===count" :src="url" style="height: 500px;width: 700px"/>
    </div>
    <template>
        <el-radio-group v-model="radio" @change="handleKeyup">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="2">不是</el-radio>
        </el-radio-group>

    </template>
    <template>
        <el-table
                :span-method="objectSpanMethod"
                style="width: 100%;margin-top: 20px;">
            <el-table-column label="整体型任务">
                <el-table-column label="分析型任务">
                </el-table-column>
                <el-table-column
                        label="反应时(s)"
                        width="120">
                    <el-table-column
                            label="准确率"
                            width="120">
                        <el-table-column
                                label="单位时间准确率"
                                width="120">
                        </el-table-column>
                    </el-table-column>
                </el-table-column>
            </el-table-column>

<!--            <el-table-column label="分析型任务">-->
<!--                <el-table-column-->
<!--                        prop="analysisReactionTime"-->
<!--                        label="反应时(s)"-->
<!--                        width="120">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="analysis"-->
<!--                        label="准确率"-->
<!--                        width="120">-->
<!--                </el-table-column>-->
<!--                <el-table-column-->
<!--                        prop="analysisRate"-->
<!--                        label="单位时间准确率"-->
<!--                        width="120">-->
<!--                </el-table-column>-->
<!--            </el-table-column>-->
        </el-table>
    </template>

</div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            tableData: [{
                "name1":"整体型任务",
                "name2":"分析型任务"
            },{
                "name1":"整体型任务",
                "name2":""
            }],
            message: '下一张',
            results: [],
            indexList: [],
            count: 0,
            radio: "0",
            startDate: 0,
            endDate: 0,
            answer: [],
            calculate: "/calculate",
            timeList: []
        },
        mounted: function () {
            window.addEventListener('keyup', this.handleKeyup)
            this.startDate = new Date().getTime();
            axios.get("/images").then(res => {
                this.results = res.data.images;
                this.indexList = res.data.indexList;
            })
        },
        methods: {
            objectSpanMethod({row, column, rowIndex, columnIndex}) {
                if (columnIndex === 0) {
                        return {
                            rowspan:1,
                            colspan: 1
                        }
                }
            },
            // 键盘事件
            handleKeyup(event, val) {
                const e = event || window.event || arguments.callee.caller.arguments[0]
                if (!e) return
                const {key, keyCode} = e
                //1 是选择是 0是选择不是
                if (key == 0 || key == 1) {
                    this.nextShow(val, key)
                }
            },
            nextShow(val, key) {
                if (this.count === 6) {
                    this.showRes();
                }
                let obj = new Object();
                obj.num = this.indexList[this.count];
                obj.val = key;
                this.answer.push(obj);
                if (this.count > 0) {
                    this.startDate = this.endDate;
                }
                this.endDate = new Date().getTime();
                let diff = this.endDate - this.startDate;
                let timeObj = new Object();
                timeObj.diff = diff;
                timeObj.num = this.indexList[this.count];
                this.timeList.push(timeObj);
                this.count++
            },
            showRes() {
                axios.post('/calculate', {"answer": this.answer, "timeList": this.timeList},
                    {headers: {'Content-Type': 'application/json; charset=utf-8'}})
                    .then(function (response) {
                        console.log(response);
                    })
            }
        }
    })
</script>
</html>